<head>
  <meta charset="utf-8">
  <title>镜像站@Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../static/layui/css/layui.css"   media="all">
    <link rel="stylesheet" href="../static/search1.css">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>


        .submitP{
            margin-top: 10%;
            width: 70px;
            height: 70px;
            margin-left: 48%;
            background-color: #ffe18b;
            border-radius:15px;
            border-color:white;
            border-style: hidden;
        }
        .submitP:hover{
            background-color: #FFB800;
        }

        .button {
  width: 280px;
  height: 90px;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 500;
  color: #000;
  background-color: #ffdbd2;
  border: none;
  border-radius: 45px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
  }

.button:hover {
  background-color: #ffcbbc;
  box-shadow: 0px 15px 20px rgba(45, 45, 45, 0.69);
  color: #ffc3c3;
  transform: translateY(-7px);
}

        .button2 {
            float: right;
  width: 280px;
  height: 90px;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 500;
  color: #000;
  background-color: #929194;
  border: none;
  border-radius: 45px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
  }

.button2:hover {
  background-color: #636363;
  box-shadow: 0px 15px 20px rgba(45, 45, 45, 0.69);
  color: #656565;
  transform: translateY(-7px);
}
        video {        position: fixed;
        right: 0;
        {#min-width: 100%;#}
        min-height: 100%;
            max-width: 100%;
        width: auto;
        height: auto;
        z-index: -999;

    }

        #content {
              position: absolute;
              height: 50px;
              width: 300px;
              margin-top:100px ;
              margin-left: 100px;
              top: 0%;
              left: 63%;
              transform: translate(-50%, -50%);
}

#content.on {
  -webkit-animation-name: in-out;
  animation-name: in-out;
  -webkit-animation-duration: 0.7s;
  animation-duration: 0.7s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

input {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  border: 4px solid #ffffff;
  border-radius: 50%;
  background: none;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  font-family: Roboto;
  outline: 0;
  -webkit-transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out,
    padding 0.2s;
  transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out,
    padding 0.2s;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
  -webkit-transform: translate(-100%, -50%);
  -ms-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
}


.AU {
    position: absolute;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  border: 4px solid #ffffff;
  border-radius: 50%;
  background: none;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  font-family: Roboto;
  outline: 0;

}

.search {
  background: none;
  position: absolute;
  top: 0px;
  left: 0;
  height: 50px;
  width: 50px;
  padding: 0;
  border-radius: 100%;
  outline: 0;
  border: 0;
  color: inherit;
  cursor: pointer;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  -webkit-transform: translate(-100%, -50%);
  -ms-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
}

.search:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 4px;
  background-color: #fff;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-top: 26px;
  margin-left: 17px;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

.close {
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

.close:before {
  content: "";
  position: absolute;
  width: 27px;
  height: 4px;
  margin-top: -1px;
  margin-left: -13px;
  background-color: #fff;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

.close:after {
  content: "";
  position: absolute;
  width: 27px;
  height: 4px;
  background-color: #fff;
  margin-top: -1px;
  margin-left: -13px;
  cursor: pointer;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.square {
  box-sizing: border-box;
  padding: 0 40px 0 10px;
  width: 300px;
  height: 50px;
  border: 4px solid #ffffff;
  border-radius: 0;
  background: none;
  color: #fff;
  font-family: Roboto;
  font-size: 16px;
  font-weight: 400;
  outline: 0;
  -webkit-transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out,
    padding 0.2s;
  transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out,
    padding 0.2s;
  -webkit-transition-delay: 0.4s, 0s, 0.4s;
  transition-delay: 0.4s, 0s, 0.4s;
  -webkit-transform: translate(-100%, -50%);
  -ms-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
}


    </style>
    <link rel="stylesheet" href="../static/table.css">
</head>
<body style="font-family: 'Roboto', sans-serif;">
<video src = "../static/bg9.mp4" type = "video/mp4" autoplay muted loop>

</video>
<div>
    <a href="/MULU"><button class="button" >
       首页
   </button></a>
    <a href="/"><button class ="button2">
        退出
    </button></a>
</div>
<form id="content" action="/searchByIC">
  <input type="text" name="input" class="input" id="search-input">

    <button type="reset"  class="search" id="search-btn"></button>
    <input type="submit" class="AU">
</form>
<div class="div3">

	<section>
		  <!--for demo wrap-->
		  <h1>根据个人收入推荐</h1>
		  <div class="tbl-header">
		    <table cellpadding="0" cellspacing="0" border="0">
		      <thead>
                        <tr>
                            {% for i in labels %}
                                <td>{{ i }}</td>
                            {% endfor %}
                        </tr>
              </thead>
		    </table>
		  </div>
		  <div class="tbl-content">
		    <table cellpadding="0" cellspacing="0" border="0">
		      <tbody>
                        {% for i in content %}
                            <tr>
                                {% for j in i %}
                                    <td>{{ j }}</td>
                                {% endfor %}
                            </tr>
                        {% endfor %}
                        </tbody>
		    </table>
		  </div>
		</section>


</div>

<script >

    const input = document.getElementById("search-input");
const searchBtn = document.getElementById("search-btn");

const expand = () => {
  searchBtn.classList.toggle("close");
  input.classList.toggle("square");
};

searchBtn.addEventListener("click", expand);

</script>

</body>
</html>